<template>
	<div class="recT-page">
		<Head navTitle="充提记录" />
		<div class="page-container ">
			<div class="uc-m-tab">
				<el-tabs class="bs-tab-flex" v-model="activeName">
					<el-tab-pane label="充值记录" name="retab"></el-tab-pane>
					<el-tab-pane label="提现记录" name="whtab"></el-tab-pane>
				</el-tabs>
			</div>
			<div class="bs-panel rule-panel">
				<div class="rec-cells" v-if="activeName == 'retab'">
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
						<div class="rec-card" v-for="(item,index) in lists" :key="index">
							<div class="rec-head">
								<div class="rec-text">充值</div>
								<div class="rec-val">5000.00</div>
							</div>
							<div class="rec-body flex">
								<div class="flex_bd">
									<div class="item">时间：2021-09-16 14:04:21</div>
									<div class="item">订单号：20210916283210</div>
									<div class="item">备注：暂无</div>
								</div>
								<div class="status" :class="item.status == '交易成功'?'text-green':'text-yellow'">{{item.status}}</div>
							</div>
						</div>
					</van-list>
				</div>
				<div class="rec-cells" v-if="activeName == 'whtab'">
					<van-list v-model="loading2" :finished="finished2" finished-text="没有更多了" @load="onLoad2">
						<div class="rec-card" v-for="(item,index) in lists2" :key="index">
							<div class="rec-head">
								<div class="rec-text">提现</div>
								<div class="rec-val">5000.00</div>
							</div>
							<div class="rec-body flex">
								<div class="flex_bd">
									<div class="item">时间：2021-09-16 14:04:21</div>
									<div class="item">订单号：20210916283210</div>
									<div class="item">备注：暂无</div>
								</div>
								<div class="status" :class="item.status == '交易成功'?'text-green':'text-yellow'">{{item.status}}</div>
							</div>
						</div>
					</van-list>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				activeName: 'retab',
				lists: [
					{
						price:'5000.00',
						status:'待处理'
					},
					{
						price:'5000.00',
						status:'交易成功'
					}
					,
					{
						price:'5000.00',
						status:'待处理'
					},
					{
						price:'5000.00',
						status:'交易成功'
					}
				],
				loading: false,
				finished: false,
				lists2: [
					{
						price:'5000.00',
						status:'待处理'
					},
					{
						price:'5000.00',
						status:'交易成功'
					}
					,
					{
						price:'5000.00',
						status:'待处理'
					},
					{
						price:'5000.00',
						status:'交易成功'
					}
				],
				loading2: false,
				finished2: false,
			};
		},
		methods: {
			onLoad() {
				// 异步更新数据
				// setTimeout 仅做示例，真实场景中一般为 ajax 请求
				setTimeout(() => {
					for (let i = 0; i < 10; i++) {
						this.lists.push(this.lists.length + 1);
					}
					// 加载状态结束
					this.loading = false;
					// 数据全部加载完成
					if (this.lists.length >= 40) {
						this.finished = true;
					}
				}, 1000);
			},
			onLoad2() {
				// 异步更新数据
				// setTimeout 仅做示例，真实场景中一般为 ajax 请求
				setTimeout(() => {
					for (let i = 0; i < 10; i++) {
						this.lists2.push(this.lists2.length + 1);
					}
					// 加载状态结束
					this.loading2 = false;
					// 数据全部加载完成
					if (this.lists2.length >= 40) {
						this.finished2 = true;
					}
				}, 1000);
			},
		}
	}
</script>
